<template>
  <div>
    <!-- 上部分 -->
    <el-row type="flex" justify="end">
      <!-- 选择年份 -->
      <el-select
        v-model="currentYear"
        placeholder="请选择"
        style="width:120px;margin-right:10px;"
        @change="handleChange"
      >
        <el-option
          v-for="year in yearList"
          :key="year"
          :label="year"
          :value="year"
        />
      </el-select>
      <!-- 选择月份 -->
      <el-select
        v-model="currentMonth"
        placeholder="请选择"
        style="width:120px;"
        @change="handleChange"
      >
        <el-option
          v-for="month in 12"
          :key="month"
          :label="month"
          :value="month"
        />
      </el-select>
    </el-row>
    <!-- 下部分 -->
    <el-calendar v-if="isVisible" v-model="currentDate">
      <!-- 单元格插槽 -->
      <template #dateCell="{data, date}">
        <div class="date-content">
          <span class="text">{{ data.day | time }}</span>
          <span v-if="isWeek(date)" class="rest">休</span>
        </div>
      </template>
    </el-calendar>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'WorkCanlendar',
  filters: {
    time(value) {
      // 取出日
      const str = value.split('-')[2]
      // 把日中的0去掉
      return str.startsWith('0') ? str.slice(1) : str
    }
  },
  props: {
    // 1. 接收外部传递的默认日期对象
    startDate: {
      type: Date,
      default() {
        return new Date()
      }
    }
  },
  data() {
    return {
      // 1. 年份
      // yearList: [2021, 2022, 2023],
      // 2. 当前的年份
      currentYear: null,
      // 3. 当前的月份
      currentMonth: null,
      // 4. 当前的日期
      currentDate: null,
      // 5. 控制日历组件的显示/隐藏
      isVisible: true
    }
  },
  computed: {
    ...mapState('settings', ['language']),
    yearList() {
      return Array.from(new Array(11)).map((item, index) => index + this.currentYear - 5)
    }
  },
  watch: {
    currentDate(newValue) {
      // console.log(newValue)
      // 根据当前的日期对象获取最新的年份和月份
      this.currentYear = newValue.getFullYear()
      this.currentMonth = newValue.getMonth() + 1
    },
    // 监视语言环境的变化
    language() {
      // window.location.reload()
      this.isVisible = false
      this.$nextTick(() => {
        this.isVisible = true
      })
    }
  },
  created() {
    // console.dir(this.startDate)
    this.currentYear = this.startDate.getFullYear()
    this.currentMonth = this.startDate.getMonth() + 1
  },
  methods: {
    // 1. 下拉框发生选择
    handleChange() {
      // console.log(this.currentYear, this.currentMonth)
      // 1.1 同步下边日历总的日期
      this.currentDate = new Date(`${this.currentYear}-${this.currentMonth}-01`)
    },
    // 2. 判断是否是周末
    isWeek(date) {
      // console.log(date.getDay())
      const day = date.getDay()
      if (day === 0 || day === 6) { // 周末
        return true
      } else {
        return false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-calendar-day {
  height:  auto;
 }
::v-deep .el-calendar-table__row td::v-deep .el-calendar-table tr td:first-child, ::v-deep .el-calendar-table__row td.prev{
  border: none;
 }
.date-content {
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
}
.date-content .rest {
  color: #fff;
  border-radius: 50%;
  background: rgb(250, 124, 77);
  width: 20px;
  height: 20px;
  line-height: 20px;
  display: inline-block;
  font-size: 12px;
  margin-left: 10px;
}
.date-content .text{
  width: 20px;
  height: 20px;
  line-height: 20px;
 display: inline-block;

}
::v-deep .el-calendar-table td.is-selected .text{
   background: #409eff;
   color: #fff;
   border-radius: 50%;
 }
::v-deep .el-calendar__header {
   display: none
}
</style>
